<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
  <head>
    <meta charset="utf-8" />
    <title>layui</title>
    <meta name="renderer" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
    <link rel="stylesheet" th:href="@{/lib/layui-v2.6.3/css/layui.css}" media="all" />
    <link rel="stylesheet" th:href="@{/css/public.css}" media="all" />
  </head>
  <body>
    <div class="layuimini-container">
      <div class="layuimini-main">
        <fieldset class="table-search-fieldset">
          <legend>搜索信息</legend>
          <div style="margin: 10px 10px 10px 10px">
            <form class="layui-form layui-form-pane" action="">
              <div class="layui-form-item">
                <div class="layui-inline">
                  <label class="layui-form-label">角色名称</label>
                  <div class="layui-input-inline">
                    <input type="text" name="roleName" autocomplete="off" class="layui-input" />
                  </div>
                </div>
                <div class="layui-inline">
                  <label class="layui-form-label">角色编码</label>
                  <div class="layui-input-inline">
                    <input type="text" name="roleKey" autocomplete="off" class="layui-input" />
                  </div>
                </div>
                <div class="layui-inline">
                  <button type="submit" class="layui-btn layui-btn-primary" lay-submit lay-filter="data-search-btn">
                    <i class="layui-icon"></i> 搜 索
                  </button>
                </div>
              </div>
            </form>
          </div>
        </fieldset>

        <script type="text/html" id="toolbarDemo">
          <div class="layui-btn-container">
            <button class="layui-btn layui-btn-normal layui-btn-sm data-add-btn" lay-event="add">添加</button>
            <button class="layui-btn layui-btn-sm layui-btn-danger data-delete-btn" lay-event="delete">删除</button>
          </div>
        </script>

        <table class="layui-hide" id="currentTableId" lay-filter="currentTableFilter"></table>

        <script type="text/html" id="currentTableBar">
          <a class="layui-btn layui-btn-normal layui-btn-xs data-count-edit" lay-event="edit">编辑</a>
          <a class="layui-btn layui-btn-xs layui-btn-danger data-count-delete" lay-event="delete">删除</a>
        </script>
      </div>
    </div>

    <script type="text/html" id="role-dataScope">
      {{#if (d.dataScope == 1) { }}
      <span>全部数据</span>
      {{# }else if(d.dataScope == 2){ }}
      <span>自定义数据权限</span>
      {{# }else if(d.dataScope == 3){ }}
      <span>本部门数据权限</span>
      {{# }else if(d.dataScope == 4){ }}
      <span>本部门及以下数据权限</span>
      {{# } }}
    </script>
    <script id="role-status" type="text/html">
      <input type="checkbox" name="enable" value="{{d.roleId}}" lay-skin="switch" lay-text="启用|禁用"
      lay-filter="role-enable" {{ d.status == '0' ? 'checked' : '' }}>
    </script>

    <script th:src="@{/lib/layui-v2.6.3/layui.js}" charset="utf-8"></script>
    <script th:inline="none">
      layui.use(['form', 'table'], function () {
        var $ = layui.jquery,
          form = layui.form,
          table = layui.table;

        table.render({
          elem: '#currentTableId',
          url: '/sys-role/query',
          toolbar: '#toolbarDemo',
          defaultToolbar: [
            'filter',
            'exports',
            'print',
            {
              title: '提示',
              layEvent: 'LAYTABLE_TIPS',
              icon: 'layui-icon-tips'
            }
          ],
          method: 'post',
          contentType: 'application/json',
          where: { id: '12344' },
          parseData: function (res) {
            // res 即为原始返回的数据
            console.log(res);
            return {
              code: res.code, // 解析接口状态
              msg: res.msg, // 解析提示文本
              count: res.data.totalCount, // 解析数据长度
              data: res.data.list // 解析数据列表
            };
          },
          cols: [
            [
              // {type: "checkbox", width: 50},
              { field: 'roleId', width: 80, title: 'ID', sort: true },
              { field: 'roleName', width: 120, title: '角色名称' },
              { field: 'roleKey', width: 120, title: '角色编码', sort: true },
              { field: 'orderNum', width: 120, align: 'center', title: '显示顺序' },
              {
                field: 'dataScope',
                width: 200,
                align: 'center',
                templet: '#role-dataScope',
                title: '数据范围'
              },
              {
                field: 'remark',
                width: 300,
                align: 'center',
                title: '角色描述'
              },
              {
                field: 'status',
                width: 200,
                align: 'center',
                title: '部门状态',
                templet: '#role-status'
              },
              {
                title: '操作',
                minWidth: 200,
                toolbar: '#currentTableBar',
                align: 'center'
              }
            ]
          ],
          limits: [10, 15, 20, 25, 50, 100],
          limit: 15,
          page: true,
          request: {
            pageName: 'pageNo', // 页码的参数名称，默认：page
            limitName: 'pageSize' // 每页数据条数的参数名，默认：limit
          },
          skin: 'line'
        });

        form.on('switch(role-enable)', function (obj) {
          var id = this.value;
          var name = this.name;

          let reqData = {};
          reqData.roleId = id;
          reqData.status = 1;
          if (obj.elem.checked) {
            reqData.status = 0;
          }
          layer.confirm(
            '确认提交？',
            {
              btn: ['确定', '关闭'] //按钮
            },
            function (index) {
              $.ajax({
                url: '/sys-role/enableRole',
                type: 'post',
                async: false,
                data: JSON.stringify(reqData),
                contentType: 'application/json',
                success: function (result) {
                  if (result.success) {
                    layer.msg(result.msg, { icon: 1, time: 1000 }, function () {});
                  } else {
                    let msgKey = obj.elem.checked ? '启用' : '关闭';
                    layer.msg(msgKey + '失败：' + result.msg, { icon: 2, time: 3000 });
                    obj.elem.checked = !obj.elem.checked;
                    form.render('checkbox');
                  }
                }
              });
            },
            function () {
              obj.elem.checked = !obj.elem.checked;
              form.render('checkbox');
            }
          );
        });

        window.reload = function () {
          $('[lay-filter="data-search-btn"]').click();
        };

        // 监听搜索操作
        form.on('submit(data-search-btn)', function (data) {
          //执行搜索重载
          table.reload(
            'currentTableId',
            {
              page: {
                curr: 1
              },
              where: data.field
            },
            'data'
          );

          return false;
        });

        /**
         * toolbar监听事件
         */
        table.on('toolbar(currentTableFilter)', function (obj) {
          if (obj.event === 'add') {
            // 监听添加操作
            var index = layer.open({
              title: '添加用户',
              type: 2,
              shade: 0.2,
              maxmin: true,
              shadeClose: true,
              area: ['100%', '100%'],
              content: '/page/role/add.html'
            });
            $(window).on('resize', function () {
              layer.full(index);
            });
          } else if (obj.event === 'delete') {
            // 监听删除操作
            var checkStatus = table.checkStatus('currentTableId'),
              data = checkStatus.data;
            layer.alert(JSON.stringify(data));
          }
        });

        //监听表格复选框选择
        table.on('checkbox(currentTableFilter)', function (obj) {
          console.log(obj);
        });

        table.on('tool(currentTableFilter)', function (obj) {
          var data = obj.data;
          var roleId = data.roleId;
          if (obj.event === 'edit') {
            var index = layer.open({
              title: '编辑角色',
              type: 2,
              shade: 0.2,
              maxmin: true,
              shadeClose: true,
              area: ['100%', '100%'],
              content: '/page/role/edit.html',
              success: function (layero, index, that) {
                var iframe = window['layui-layer-iframe' + index];
                iframe.init(data);
              }
            });
            $(window).on('resize', function () {
              layer.full(index);
            });
            return false;
          } else if (obj.event === 'delete') {
            layer.confirm('真的删除行么', function (index) {
              // obj.del();
              $.ajax({
                url: '/sys-role/' + roleId,
                type: 'delete',
                async: false,
                success: function (result) {
                  if (result.success) {
                    layer.msg(result.msg, { icon: 1, time: 1000 }, function () {
                      reload();
                    });
                  } else {
                    layer.msg(result.msg, { icon: 2, time: 3000 });
                  }
                }
              });
              layer.close(index);
            });
          }
        });
      });
    </script>
  </body>
</html>
